<template>
  <div class="data-stats">
    <div class="section-header">
      <h3>
        <i class="fas fa-chart-line"></i>
        <span>平台数据</span>
      </h3>
    </div>

    <div class="stats-grid">
      <!-- 总交易额 -->
      <div class="stat-card primary">
        <div class="stat-icon">
          <i class="fas fa-coins"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">12,856.8</span>
            <span class="unit">万元</span>
          </div>
          <div class="stat-label">累计交易额</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+12.5%</span>
          </div>
        </div>
      </div>

      <!-- 注册用户数 -->
      <div class="stat-card success">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">15,680</span>
            <span class="unit">+</span>
          </div>
          <div class="stat-label">注册用户</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+8.3%</span>
          </div>
        </div>
      </div>

      <!-- 合作基地数 -->
      <div class="stat-card warning">
        <div class="stat-icon">
          <i class="fas fa-seedling"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">245</span>
            <span class="unit">个</span>
          </div>
          <div class="stat-label">合作基地</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+15.2%</span>
          </div>
        </div>
      </div>

      <!-- 月交易量 -->
      <div class="stat-card info">
        <div class="stat-icon">
          <i class="fas fa-shopping-cart"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">8,920</span>
            <span class="unit">单</span>
          </div>
          <div class="stat-label">月交易量</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+22.1%</span>
          </div>
        </div>
      </div>

      <!-- 平均成交价 -->
      <div class="stat-card secondary">
        <div class="stat-icon">
          <i class="fas fa-tag"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">18.6</span>
            <span class="unit">元/斤</span>
          </div>
          <div class="stat-label">平均成交价</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+5.8%</span>
          </div>
        </div>
      </div>

      <!-- 平台满意度 -->
      <div class="stat-card accent">
        <div class="stat-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">
            <span class="number">98.5</span>
            <span class="unit">%</span>
          </div>
          <div class="stat-label">用户满意度</div>
          <div class="stat-trend positive">
            <i class="fas fa-arrow-up"></i>
            <span>+2.1%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 简化版本，移除复杂的动画逻辑
</script>

<style lang="scss" scoped>
.data-stats {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;
      
      i {
        color: #e4393c;
        font-size: 22px;
      }
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    @media (max-width: 480px) {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .stat-card {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 12px;
      padding: 20px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid #e0e0e0;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #e4393c, #ff6b6b);
      }

      &.primary::before { background: linear-gradient(90deg, #e4393c, #ff6b6b); }
      &.success::before { background: linear-gradient(90deg, #28a745, #20c997); }
      &.warning::before { background: linear-gradient(90deg, #ffc107, #fd7e14); }
      &.info::before { background: linear-gradient(90deg, #17a2b8, #6f42c1); }
      &.secondary::before { background: linear-gradient(90deg, #6c757d, #495057); }
      &.accent::before { background: linear-gradient(90deg, #fd7e14, #e83e8c); }

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        position: relative;
        
        i {
          font-size: 24px;
          color: #fff;
          z-index: 2;
        }
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: linear-gradient(135deg, #e4393c, #ff6b6b);
          z-index: 1;
        }
      }

      &.primary .stat-icon::before { background: linear-gradient(135deg, #e4393c, #ff6b6b); }
      &.success .stat-icon::before { background: linear-gradient(135deg, #28a745, #20c997); }
      &.warning .stat-icon::before { background: linear-gradient(135deg, #ffc107, #fd7e14); }
      &.info .stat-icon::before { background: linear-gradient(135deg, #17a2b8, #6f42c1); }
      &.secondary .stat-icon::before { background: linear-gradient(135deg, #6c757d, #495057); }
      &.accent .stat-icon::before { background: linear-gradient(135deg, #fd7e14, #e83e8c); }

      .stat-content {
        .stat-value {
          display: flex;
          align-items: baseline;
          gap: 4px;
          margin-bottom: 8px;
          
          .number {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            line-height: 1;
          }
          
          .unit {
            font-size: 14px;
            color: #666;
            font-weight: 500;
          }
        }
        
        .stat-label {
          font-size: 14px;
          color: #666;
          margin-bottom: 8px;
          font-weight: 500;
        }
        
        .stat-trend {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          font-weight: 600;
          
          &.positive {
            color: #28a745;
          }
          
          &.negative {
            color: #dc3545;
          }
          
          i {
            font-size: 10px;
          }
        }
      }
    }
  }
}
</style>